<template>
    <div class="liquid-data-pannel-container">
        <div class="head">
            <div class="title">
               <span>{{ props.title }}</span> 
                <!-- <el-tooltip
                        effect="dark"
                        content="点击试试下载"
                        placement="bottom"
                    >
                        <i-ep-download
                            class="download"
                            @click="downloadEchart"
                        />
                    </el-tooltip> -->
            </div>
        </div>

        <div class="body">
            <div>
                <div style="text-align: center;font-weight: 600;color: #888;">锚点 / 总量</div>
                <div class="summary">
                    机房数量：<span>
                        {{ props.anchorAppratusRoomAmount }}/{{
                            props.appratusRoomAmount
                        }}
                    </span>
                </div>
                <div class="summary">
                   BBU数量：<span>
                        {{ props.anchorBbuAmount }}/{{ props.totalBbuAmount }}
                    </span>
                </div>
            </div>
            <div class="liquid">
                <LiquidDash
                    :id="props.idPrefix+'4g'"
                    :data="dataRef1"
                    :wave-and-bord-color="waveColorRef1"
                    title-text="4G系数"
                ></LiquidDash>
                &nbsp;&nbsp;
                <LiquidDash
                    :id="props.idPrefix+'5g'"
                    :data="dataRef2"
                    :wave-and-bord-color="waveColorRef2"
                    title-text="5G系数"
                ></LiquidDash>
                &nbsp;&nbsp;
                <LiquidDash
                    :id="props.idPrefix+'45g'"
                    :data="dataRef3"
                    :wave-and-bord-color="waveColorRef3"
                    title-text="4/5G系数"
                ></LiquidDash>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import LiquidDash from "@/components/liquid_dash/liquid_dash_index.vue";
import { ref,watch } from "vue";
const props = defineProps({
    idPrefix:{
        type:String,
        required: true,
    },
    title:{
        type:String,
        required: true,
    },
    appratusRoomAmount: {
        type: Number,
        required: true,
    },
    anchorAppratusRoomAmount: {
        type: Number,
        required: true,
    },
    anchorBbuAmount: {
        type: Number,
        required: true,
    },
    totalBbuAmount: {
        type: Number,
        required: true,
    },
    g4Rate: {
        type: Number,
        required: true,
    },
    g5Rate: {
        type: Number,
        required: true,
    },
    g45Rate: {
        type: Number,
        required: true,
    },
});



const dataRef1 = ref([
    {
        name: "4G",
        value: props.g4Rate,
    },
]);
const dataRef2 = ref([
    {
        name: "5G",
        value: props.g5Rate,
    },
]);
const dataRef3 = ref([
    {
        name: "4/5G",
        value: props.g45Rate,
    },
]);

watch(props ,()=>{
    console.log('in liquid pannel watch');
    console.log(props);
    dataRef1.value[0].value=props.g4Rate
    dataRef2.value[0].value=props.g5Rate
    console.log(props.g45Rate);
    
    dataRef3.value[0].value=props.g45Rate
    },
    
    {
        deep:true
    }
)

const waveColorRef1 = ref("#4D70EE");
const waveColorRef2 = ref("#02C5D2");
const waveColorRef3 = ref("#FFCE2C");
////#region defineXxx
//defineOptions({
//name:
//});

//const props=defineProps({
//propA:{
//type:String,
//required:true
//},
//propB:{
//type:Number,
//default:1
//},
//propC:{
//type:String as PropType<MyType>,
//required:true
//},
//});

//const emit = defineEmits<{
//event1:[para1:number,para2:string],
//event2:[para1:number,para2:string],
//}>();
////#endregion
</script>
<style lang="scss" scoped>
.liquid-data-pannel-container {
    background-image: linear-gradient(90deg, #edf5ff 0, #f1fcff 100%);
    box-shadow: 0 4px 8px 0 rgba(7, 75, 156, 0.2);
    border-radius: 15px;
    padding: 10px;
}
.head{
    height: 54px;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
}
.title {
    font-weight: 700;
    font-size: 18px;
    // border-left: 3px solid #e02626;
    padding-left: 10px;
    vertical-align: middle;
    display: flex;
    align-items: center;
}

.title span{
    height: 16px;
    line-height: 16px;
    margin-left: 10px;
}

.title::before{
    content: "";
    display: inline-block;
    width: 3px;
    height: 16px;
    line-height: 16px;
    background: #fb6602;
}
.body {
    display: flex;
    padding: 8px 0;
    align-items: center;
    justify-content: space-between;
    .summary {
        display: block;
        font-size: 13px;
        margin-top: 10px;
        span {
            font-size: 16px;
            font-weight: 600;
        }
    }
}
.liquid {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>
